<template>
  <div style="margin-top: 20px; margin: 10px; ">
    <el-form :inline="true" :model="searchOrd" class="demo-form-inline">
      <el-form-item label="订单代码">
        <el-input
            size="mini"
            v-model="searchOrd.ordCode"
            placeholder="请输入订单代码"
        ></el-input>
      </el-form-item>

      <el-form-item label="客户名称">
        <el-input
            size="mini"
            v-model="searchOrd.cusName"
            placeholder="请输入客户名称"
            :disabled="level"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单日期">
        <el-input
            size="mini"
            v-model="searchOrd.ordDate"
            placeholder="请输入订单日期"
        ></el-input>
      </el-form-item>
      <el-form-item label="订单价格">
        <el-input
            size="mini"
            v-model="searchOrd.ordPrice"
            placeholder="请输入订单日期"
        ></el-input>
      </el-form-item>

      <el-form-item >
        <el-button size="small"  type="primary" @click="searchOrd.need=0;page()">查询</el-button>
        <el-button size="small"  type="info" @click="clearInfo2()">清空</el-button>
<!--        <el-button-->
<!--            size="small"-->
<!--            type="primary"-->
<!--            @click="dialogFormVisible = true; ord={}"-->
<!--        >+ 新增订单-->
<!--        </el-button-->
<!--        >-->
      </el-form-item>

    </el-form>





    <!-- 数据表格 -->
    <template>
      <el-table
          highlight-current-row
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 1124px"

      >
        <el-table-column type="index" width="100" label="序号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="ordCode" width="100" label="订单代码" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="cusName" width="100" label="客户名称" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="ordDate" width="160" label="订单日期" header-align="center"
                         align="center"></el-table-column>
        <el-table-column prop="ordPrice" width="140" label="订单价格" header-align="center"
                         align="center"></el-table-column>

        <el-table-column label="操作" width="400" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button
                size="mini"
                type="primary"
                plain
                @click="checkDetail(scope.row)"
            >查看明细
            </el-button>

            <el-button
                size="mini"
                type="danger"
                plain
                @click="deleteById(scope.row.ordCode)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <br>
    <!--分页工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :background="background"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount">
    </el-pagination>

    <!--  订单明细-->
    <div>
      <el-dialog title="订单信息" :visible.sync="dialogForm3Visible" width="70%">
        <el-form v-model="ordDetail">
          <el-row>
            <el-col :span="4">
              <el-form-item label="客户名称：" label-width="100px">{{ordDetail.cusName}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户地址：" label-width="150px">{{ordDetail.cusAdd}}</el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="客户邮编：" label-width="100px">{{ordDetail.cusPost}}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订购时间：" label-width="150px">{{ordDetail.ordDate}}</el-form-item>
            </el-col>
          </el-row>
          <el-table :data="ordDetail.details">
            <el-table-column type="index" width="140" label="序号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="ordCode" width="140" label="订单代码" header-align="center"
                             align="center"></el-table-column>
            <el-table-column prop="goodName" width="200" label="商品名称" header-align="center"
                             align="center"></el-table-column>
            <el-table-column prop="price" width="140" label="单价" header-align="center"
                             align="center"></el-table-column>
            <el-table-column prop="num" width="140" label="订购数量" header-align="center"
                             align="center"></el-table-column>
            <el-table-column prop="total" width="140" label="金额" header-align="center"
                             align="center"></el-table-column>
          </el-table>
        </el-form>
        <span style="color: red;float: left">总金额：{{ordDetail.totalPrice}} 元</span>
      </el-dialog>
    </div>
  </div>

</template>

<script>
import {addOrder, ordDetail} from "@/api/order";
import {changeOrder} from "@/api/order";
import {deleteOrder} from "@/api/order";
import {page} from "@/api/order";
import {clear} from "core-js/internals/task";
import th from "element-ui/src/locale/lang/th";
import id from "element-ui/src/locale/lang/id";
import axios from "axios";

export default {
  data() {
    return {
      level:false,
      background: true,
      // 每页显示的条数
      pageSize: 5,
      // 总记录数
      totalCount: 100,
      // 当前页码
      currentPage: 1,
      formLabelWidth: "120px",
      dialogFormVisible: false, //控制对话框是否可见
      dialogForm2Visible: false, //控制对话框是否可见
      dialogForm3Visible: false,
      ord: {//新增和编辑
        ordCode: "",
        cusName: "",
        ordDate: "",
        ordPrice: "",
      },
      searchOrd:{//条件查询
        ordCode: "",
        cusName: "",
        ordDate: "",
        ordPrice: "",
        need:0,
      },
      tableData: [],
      ordDetail:{
        cusName:"",
        cusAdd:"",
        ordDate:"",
        cusPost:"",
        details:[],
        totalPrice:0,
      },
      user: {},
    };
  },

  methods: {
    clear,
    deleteById(id) {
      this.$confirm("此操作将删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteOrder(id).then((res)=>{
          if(res.data.code===1){
            this.$message.success("删除成功")
            this.again();
          }
        }).catch((e)=>{})


      }).catch(() => {
        //用户点击取消按钮
        this.$message.info("已取消删除");
      });
    },

    checkDetail(obj) {
      this.dialogForm3Visible=true;
      this.ordDetail.cusName=obj.cusName;
      this.ordDetail.cusPost=obj.cusPost;
      this.ordDetail.cusAdd=obj.cusAdd;
      this.ordDetail.ordDate=obj.ordDate;
      this.ordDetail.totalPrice=obj.ordPrice;
      ordDetail(obj.ordCode).then((res)=>{
        if(res.data.code===1){
          //console.log(res.data.data)
          this.ordDetail.details=res.data.data
          console.log(this.ordDetail.details)
        }
      }).catch((e)=>{})
      // axios.get("/getOrderDetail",{
      //   params:{
      //     id:
      //   }
      // })
    },

    clearInfo(){
      this.ord = {
        ordCode: "",
        cusName: "",
        ordDate: "",
        ordPrice: "",
      }
    },
    clearInfo2(){
      this.searchOrd = {
        ordCode: "",
        cusName: "",
        ordDate: "",
        ordPrice: "",
      }
      if(this.user.cusName==="admin")
        this.searchOrd.need=1
      else
        this.searchOrd.need=0
      this.again()
    },
    add() {
      const {ord} = this;
      if (!ord.ordCode || !ord.cusName || !ord.ordDate || !ord.ordPrice ) {
        this.$message("请完整填写");
      } else {
        addOrder(this.ord).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("添加成功")
            this.dialogFormVisible = false
            this.clearInfo()
            this.again();
          }
        }).catch((e) => {
        })
      }

    },
    add2() {
      const {ord} = this;
      if (!ord.ordCode || !ord.cusName || !ord.ordDate || !ord.ordPrice ) {
        this.$message("请完整填写");
      } else {
        changeOrder(this.ord).then((res) => {
          if (res.data.code === 1) {
            this.$message.success("修改成功")
            this.dialogForm2Visible = false
            this.clearInfo()
          }
        }).catch((e) => {
        })
      }

    },


    //分页
    handleSizeChange(val) {
      // 重新设置每页显示的条数
      this.pageSize = val;
      this.again();
    },
    handleCurrentChange(val) {
      // 重新设置当前页码
      this.currentPage = val;
      this.again();
    },

    // 查询分页数据
    page() {
      console.log(this.searchOrd)
      page(
          this.searchOrd,
          this.currentPage,
          this.pageSize
      ).then((res) => {
        console.log(res);
        if(res.data.code!=0){
          this.totalCount = res.data.data.total;
          this.tableData = res.data.data.rows;
        }
      }).catch((e)=>{});
    },

    again()
    {
      this.searchOrd.cusName=this.user.cusName;
      this.page();
      console.log(this.tableData)
      if(this.user.cusName === "admin")
        this.searchOrd.cusName=""
      else
        this.level=true
    }

  },
  mounted() {
    this.user=localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{};
    //console.log(this.user);
    this.searchOrd.need=1;
    this.again();
  },
};
</script>
<style>

</style>
